<template>
  <div class="execution">
    <basic-container>
      <el-tabs v-model="activeName" @tab-click="handleClickTab">
        <el-tab-pane label="普通用户" name="first"></el-tab-pane>
        <el-tab-pane label="博主用户" name="second"></el-tab-pane>

        <div class="table-container" style="margin-top: 20px">
          <el-table
            border
            :data="list"
            :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }">
            <el-table-column prop="id" label="用户ID" min-width="80" align="center"></el-table-column>
            <el-table-column prop="nickName" label="用户昵称" min-width="120" align="center"></el-table-column>
            <el-table-column label="用户头像" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.header" style="height: 50px;width: 50px;"/>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="用户手机号" min-width="120" align="center"></el-table-column>
            <el-table-column label="是否为博主" min-width="120" align="center">
              <template slot-scope="scope">
                <el-switch
                  @change="handleShowStatusChange(scope.$index, scope.row)"
                  :active-value="1"
                  :inactive-value="2"
                  v-model="scope.row.isContent">
                </el-switch>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.size"
            :page-sizes="[5,10,15]"
            :current-page.sync="listQuery.current"
            :total="total">
          </el-pagination>
        </div>
      </el-tabs>

    </basic-container>
  </div>
</template>
<script>
import { findMemberPage,reviseIsContent  } from "@/api/found/index";
const defaultUserDetail = {
    current: 1,
    size: 10,
    phone: null,
    isContent: 2
  }
export default {
  data() {
    return {
      activeName: "first",
      tabValueMap: {
        first: 2,
        second: 1
      },
      list: [],
      listQuery: Object.assign({}, defaultUserDetail),
      total: 0,
    }
  },
  created() {
    this.getUserList();
  },
  methods: {
    handleClickTab(tab, event) {
      this.listQuery.isContent = this.tabValueMap[this.activeName];
      this.listQuery.current = 1;
      this.getUserList();
    },
    handleSizeChange(val) {
        this.listQuery.size = val;
        this.getUserList();
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.getUserList();
      },
      getUserList() {
        findMemberPage(this.listQuery).then(res => {
          this.list = res.data.data.records;
          this.total = res.data.data.total;
        })
      },
      handleShowStatusChange(index,row) {
        reviseIsContent({
          memberId: row.id,
          isContent: row.isContent
        }).then(res => {
          if (res.data.code == 200) {
            this.dialogVisible = false;
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            this.productAttr = Object.assign({}, defaultUserDetail);
            this.getUserList();
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
              duration: 1000,
            });
          }
        })
      }
  }
}
</script>
